
<template>
  <!-- 表单区域 -->
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 这里能够直接使用面包屑组件是因为这个组件和频道组件一样都被注册成了全局组件
    放在components(组件) 这个文件夹里面,意思就是这是全局的组件,全局组件都是在main.js
    中进行全局注册的,可以在子组件中直接饮用 Vue.component('MyBreadcrumb', MyBreadcrumb)
    这里面双括号只要跟上一行中引号内的名字一样就可以了,这个是自定义的组件名称,叫什么都可以  -->
        <my-breadcrumb>内容管理</my-breadcrumb>
        <!-- <el-breadcrumb separator="/">这是面包屑组件的原始代码,它本质上就长这样
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>内容管理</el-breadcrumb-item>
    </el-breadcrumb> -->
      </div>
      <div>
        <!-- 把这个form表单单独放到这个div中,可以有效的处理这一整个的表单,保证不出错,局部改进
    label-width 表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值
    支持 auto。 label 表示该行要显示的标签文本 -->
        <!-- :model是v-bind:model的缩写,<child :model="msg"></child>这种只是将父组件的数据传递到了子组件
    ，并没有实现子组件和父组件数据的双向绑定 -->
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="状态">
            <el-radio-group v-model="form.status">
              <el-radio :label="null">全部</el-radio>
              <el-radio :label="0">草稿</el-radio>
              <el-radio :label="1">待审核</el-radio>
              <el-radio :label="2">审核通过</el-radio>
              <el-radio :label="3">审核失败</el-radio>
              <el-radio :label="4">已删除</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- <el-form-item label="频道">
            <el-select v-model="form.channel" placeholder="请选择频道">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item> -->

          <!-- 频道组件 -->
          <!-- 组件传值,这个form.channelId的值在父组件当中,但是子组件需要声明一个props里面带一个value
           最后子组件里面需要一个引起事件变动的契机,在这个契机后面注册的一定是input事件,就可以引起父组件中
           这个form.channelId值的变动,在父组件中,这个值是动态加上的 -->
          <my-channel v-model="form.channelId"></my-channel>
          <el-form-item label="日期">
            <el-col :span="11">
              <!-- 这里日期格式比较特殊,是从饿了么日期选择器中摘取的几个特征
              这里面有</el-date-picker> 选择日期的
              </el-time-picker> 选择时间的,因为这个两个都是选择时间的,所以需要
              改一下 type = daterange
              value-format 这个是规定日期格式的属性,可以根据接口文档的需求去调整   -->
              <el-date-picker
                v-model="form.date"
                style="width: 100%"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!-- 表格区域 下部的这整个区域也是一个卡片靠前,上部有一个表头,下部是一个表格-->
    <el-card class="box-card">
      <!-- 這是一個插槽,這個組件是在element ui 中的一个配置
      element ui 中的组件基本都是通过插槽的形式实现的 -->
      <div slot="header" class="clearfix" style="margin-top: 20px">
        根据筛选条件共查询到 {{ total_count }} 条结果：
      </div>
      <!-- 数据列表  这个:data="articles" 中
      articles 是一个数组,可以存放多个内容,这里面
      存储的都是拿回来的文章的数据,一条数据就是一个对象-->
      <el-table :data="articles" style="width: 100%">
        <el-table-column label="封面" width="180">
          <template slot-scope="scope">
            <!-- slot-scope:作用域插槽，则这个template内部，可以通过scope.row来获取当前行的数据 -->
            <!-- 在这里scope.row,获取得是每一个当前行的数据,这个数据是已经循环好的一个数据 -->
            <!-- <el-image></el-image> 是element ui自带的一个标签,可以放更多的图片的属性 -->
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.cover.images[0]">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <!-- {{scope.row.cover.images[0]}} -->
          </template>
        </el-table-column>
        <!-- 在el-table-column中用prop属性来对应对象中的键名即可填入数据
         prop="title" 对应的就是prop数组中对象的title内容-->
        <el-table-column prop="title" label="标题"> </el-table-column>
        <!-- 这是一个新的组件,是用来表示状态的,标题给出来了,内容需要根据实际
        情况来显示,这个不能绑定特定的哪一个值 -->
        <el-table-column width="100" label="状态">
          <template slot-scope="scope">
            <!-- 这里巧妙利用v-if 它的一个高级用法,很灵性 -->
            <el-tag v-if="scope.row.status === 0" type="info">草稿</el-tag>
            <el-tag v-else-if="scope.row.status === 1" type="success">待审核</el-tag>
            <el-tag v-else-if="scope.row.status === 2">审核通过</el-tag>
            <el-tag v-else-if="scope.row.status === 3" type="warning">审核失败</el-tag>
            <el-tag v-else-if="scope.row.status === 4" type="danger">已删除</el-tag>
            <el-tag v-else type="danger">unknow</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="pubdate" label="发布时间" width="100">
        </el-table-column>
        <el-table-column prop="address" width="100" label="操作">
          <!-- 想要在表格中插入其他内容,必须使用插槽,必须使用<template></template>
          这个插件,然后向这个里面插入其他的内容,比如这个编辑和删除的按钮 -->
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              circle
              @click="hEdit(scope.$index, scope.row)"
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="hDelete(scope.$index, scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- /数据列表 -->

      <!-- 列表分页 -->
      <!-- @current-change是element-ui规定的点击事件  -->
      <!-- 分页组件
        1. total是总条数。
        2. current-change事件。当点击页码时，它会触发并会传入当前的页码。
        3. page-size: 默认10，它会以每页10条进行计算总页数
         background 是否为分页按钮添加背景色(是一个灰白色的背景,不好改) -->
      <el-pagination
        layout="prev, pager, next"
        background
        :page-size="10"
        @current-change="hPageChange"
        :total="total_count"
      >
      </el-pagination>
      <!-- /列表分页 -->
    </el-card>
  </div>
</template>

<script>
// 引入子组插件
// import myChannel from '@/components/myChannel.vue'
export default {
  name: 'articles',
  // components: { // 给子组件注册
  //   myChannel
  // },
  props: {},
  data () {
    return {
      form: {
        status: null, // 对应数据的状态,默认是null,全部
        channelId: null, // 对应频道信息
        date: '' // 数组类型的,保存的是两个日期的时间
      },
      page: 1, // 当前显示的页面是第几页
      total_count: 0, // 总信息总数
      articles: [] // 接收的文章内容全部保存在这里(一共10篇),因为就请求了10篇,这就是一个大的数组套对象,
    }
  },
  methods: {
    // 封装一个参数,这样代码可以整洁一些,技巧不太懂,回头看一下视频
    // 回看一下视频,这个参数拼接的一些技巧
    bulidParam () {
      const { status, dateRange, channelId } = this.form
      // 这里queryObj还只有page这一个属性
      const queryObj = { page: this.page }
      queryObj.status = status
      queryObj.channel_id = channelId
      // console.log(queryObj)
      if (dateRange) {
        // 再给他添加两个属性,这时如果再打印,那就是一个完整的数据了
        queryObj.begin_pubdate = dateRange[0]
        queryObj.end_pubdate = dateRange[1]
      }
      // 把函数运行的结果传递出去给他人用,要不然这个函数就白写了
      return queryObj
    },
    // 点击提交按钮,会触发的事件,就是发送请求
    async onSubmit () {
      this.doQuery() // 调用封装好的查询函数
      // console.log(this.form)// 打印表单中的内容,这个表单的内容时要提交的查询参数
      // const paramsObj = this.bulidParam()
      // const res = await this.$axios({
      //   method: 'get',
      //   url: '/mp/v1_0/articles'
      // })
    },
    async doQuery () {
      // 设置参数
      const paramsObj = this.bulidParam()
      // 发送请求
      const res = await this.$axios({
        method: 'GET',
        url: '/mp/v1_0/articles',
        params: paramsObj
      })
      // 更新数据
      this.articles = res.data.data.results
      this.total_count = res.data.data.total_count
    },
    hQuery () {
      this.doQuery()
    },
    // 点击分页按钮会触发的事件,他会自动传回一个参数,就是当前的页码数
    hPageChange (curPage) {
      console.log('点击了分页', curPage)
      // 1. 更新页码
      this.page = curPage
      // 2.重发请求
      this.doQuery()
    },
    // 点击编辑按钮触发的跳转事件 两个传回来的值,一个是行号,下角标,一个是具体的内容
    hEdit (idx, row) {
      console.log('当前的行号是', idx, '当前的行是', row)
      // 给id加上tostring（） 方法是因为它是一个大数方法处理过的对象，要拼接回来
      this.$router.push('/articleEdit/' + row.id.toString())
    },
    // 定义删除事件,接受了点击按钮触发时,传入的参数
    async doDelete (id) {
      try {
        const res = await this.$axios({
          method: 'DELETE',
          url: '/mp/v1_0/articles/' + id
        })
        console.log(res)
        this.doQuery()
      } catch (err) {
        this.$message.error('删除失败')
        console.log(err)
      }
    },
    // 点击删除按钮触发的事件,传回的是下角标和整行的数据
    hDelete (idx, row) {
      this.$confirm('你真的要删除吗?')
        .then(() => {
          const id = row.id.toString()
          // console.log('你要删除的数据是', id)
          this.doDelete(id)
        })
        .catch(() => {
          // 失败的数据
        })
    }
  },
  mounted () {
    this.doQuery()
  }
}
</script>

<style>
.filter-card {
  margin-bottom: 30px;
}

.list-table {
  margin-bottom: 20px;
}
</style>
